<template>
  <div class="box-item item-center padding">
    <ul class="data-ul">
      <li class="data-li" v-for="(item, index) in info" :key="index">
        <p class="data-li-title">{{ item.title }}</p>
        <p class="data-li-content">
          <span class="data-number" :style="{color: themeColor}">{{ item.count }}</span>
          <span class="data-unit">{{ item.unit }}</span>
        </p>
      </li>
    </ul>
    <div ref="chart" style="width: 100%; height: calc(100% - 100px);"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import elementResizeDetectorMaker from 'element-resize-detector'

const erd = elementResizeDetectorMaker()
const geoJSON = {
  nanchang_full: require('./nanchang_full.json'),
  nanchang: require('./nanchang.json')
}

export default {
  name: 'box-item-two',
  props: {
    map: {
      type: String,
      default: 'nanchang'
    },
    info: {
      type: Array,
      default () {
        return []
      }
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
  },
  data () {
    return {
      chart: null
    }
  },
  mounted () {
    echarts.registerMap(this.map, geoJSON[this.map])
    echarts.registerMap(this.map + '_full', geoJSON[this.map + '_full'])
    const chart = echarts.init(this.$refs.chart)
    chart.setOption(this.getChartOption())

    erd.listenTo(this.$refs.chart, function () {
      chart.resize({
        animation: {
          duration: 1000,
        }
      })
    })
  },
  beforeDestroy () {
    erd.removeAllListeners(this.$refs.chart)
  },
  methods: {
    getChartOption () {
      const vm = this
      const getData = this.getData
      const toHTML = this.toHTML
      const regions = geoJSON[this.map + '_full'].features
      const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
      return {
        tooltip: {
          trigger: 'item',
          position: function (point) {
            const [x, y] = point
            return [x + 20, y - 20]
          },
        },
        geo: [
          {
            map: this.map,
            itemStyle: {
              areaColor: 'transparent',
              borderColor: '#50fdfc',
              borderWidth: 4,
            },
            emphasis: {
              disabled: true,
            },
            tooltip: {
              show: false,
            },
          },
          {
            map: this.map + '_full',
            regions: [
              ...regions.map((v, i) => ({
                name: v.properties.name,
                label: {
                  show: true,
                  color: '#ffffff',
                },
                itemStyle: {
                  areaColor: colors[i],
                },
                emphasis: {
                },
                tooltip: {
                  show: true,
                  formatter: function (params, ticket, callback) {
                    if (vm.regionName !== params.name) {
                      vm.regionHTML = '<div style="min-height: 150px;">loading...</div>'
                      getData().then(res => {
                        // TODO
                        const data = [params.name, ...res]
                        vm.regionName = params.name
                        const regionHTML = vm.regionHTML = toHTML(data)
                        callback(ticket, regionHTML)
                      })
                    }
                    return vm.regionHTML
                  },
                  backgroundColor: 'rgba(12,27,88,0.9)',
                  extraCssText: `
                    width: 400px;
                    color: #ccc;
                    border-radius: 6px;
                    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
                  `
                },
              }))
            ],
          },
        ],
      }
    },
    getData (name) {
      return new Promise((resolve) => {
        const rand = () => Math.round(Math.random() * 1000)
        setTimeout(() => {
          resolve(Array(8).fill(1).map(v => rand()))
        }, 400)
      })
    },
    toHTML (data) {
      const [v1, v2, v3, v4, v5, v6, v7, v8, v9] = data
      return `
        <table class="tooltip-table">
          <caption style="line-height: 2;">${v1}（${v2}家企业）</caption>
          <thead>
            <tr>
              <td>名称</td>
              <td>数值</td>
              <td>单位</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>综合能源消费量</td>
              <td>${v3}</td>
              <td>万吨标准煤</td>
            </tr>
            <tr>
              <td>用电量</td>
              <td>${v4}</td>
              <td>万吨标准煤</td>
            </tr>
            <tr>
              <td>用煤量</td>
              <td>${v5}</td>
              <td>万吨标准煤</td>
            </tr>
            <tr>
              <td>万元工业总产值工业消耗</td>
              <td>${v6}</td>
              <td>千克标准煤/万元</td>
            </tr>
            <tr>
              <td>工业总产值</td>
              <td>${v7}</td>
              <td>万元</td>
            </tr>
            <tr>
              <td>工业增加值</td>
              <td>${v8}</td>
              <td>万吨标准煤</td>
            </tr>
            <tr>
              <td>万元工业增加值综合消耗</td>
              <td>${v9}</td>
              <td>千克标准煤/万元</td>
            </tr>
          </tbody>
        </table>
      `
    },
    update (option = {}) {
      if (this.chart) {
        this.chart.setOption({
          ...this.chartOption,
          ...option
        })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
  .data-ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
    &:after {
      content: "";
      display: table;
      clear: both;
    }
  }
  .data-li {
    float: left;
    width: 33.33%;
    padding: 10px 15px;
    box-sizing: border-box;
    border: 1px solid var(--theme-color);
    &:first-child {
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }
    &:last-child {
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
    }
    &:nth-of-type(2) {
      margin-left: -1px;
      margin-right: -1px;
    }
  }
</style>
